/*
 * @Date: 2022-02-13 14:09:26
 * @LastEditors: xiaole
 * @LastEditTime: 2022-02-13 19:52:54
 */

import { defineComponent, ref } from "vue";
import { Swipe, SwipeItem } from 'vant';
import './edit-swiper.scss'

export default defineComponent({
  setup() {

    const images = ref([
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210611094Q512b-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647345168&t=cdff7d816bd69b734f8aa3655784461a',
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647345168&t=516e79201c4de2f8c40babf0a0f72bb3',
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647345168&t=0ccdc62110574da4a27e1c19efaa7362'
    ]);
    return () =>  
     <Swipe class="swipe-box" autoplay={3000} lazy-render>
      {
        images.value.map(image => {
          return <SwipeItem class="swipe-item" key={image}>
            <img class="swipe-img" src={image} />
          </SwipeItem>
        })
      }
    </Swipe>
  }
})